<!DOCTYPE html>
<html>
<head> 
	<title>Nearby Map - Meet Halfway</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="canonical" href="http://www.nearbymap.com/">
	<link type="text/css" rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
	<link type="text/css" rel="stylesheet" href="m.css">
	<script type="text/javascript" src="http://www.google.com/jsapi"></script><script type="text/javascript">// <![CDATA[
		google.load("jquery", "1");
		google.setOnLoadCallback(function() {
			//TODO init code
		});
		// ]]></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
	<script src="http://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
	<script type='text/javascript' src='cafe-matrix.js'></script>
</head> 
<body onload="initialize()">
<div data-role="page" id="first" data-theme="c">
	<div data-role="header">
		<h1>Start Points</h1><a href="#second" data-icon="arrow-r" data-iconpos="right">Map</a>
	</div>
	<div data-role="content">
		<div data-role="fieldcontain">
			<label for="name">Point 1</label>
			<input type="search" id="startField1" value=""  />
			<select id="mode1">
				<option value="DRIVING">Driving</option>
				<option value="TRANSIT">Transit</option>
				<option value="WALKING">Walking</option>
				<option value="BICYCLING">Bicycling</option>
			</select>
		</div>
		<div data-role="fieldcontain">
			<label for="name">Point 2</label>
			<input type="search" id="startField2" value=""  />
			<select id="mode2">
				<option value="DRIVING">Driving</option>
				<option value="TRANSIT">Transit</option>
				<option value="WALKING">Walking</option>
				<option value="BICYCLING">Bicycling</option>
			</select>
		</div>
		<a href="#second" data-role="button" data-icon="arrow-r" data-iconpos="right" onclick="processUserReq(); return false" >Get Touch Points</a>
	</div>
</div>
<div data-role="page" id="second" data-add-back-btn="true" data-theme="c">
	<div data-role="header">
		<h1>Touch Points</h1><a href="#third" data-icon="arrow-r" data-iconpos="right">Routes</a>
	</div>
	<div data-role="content">       
		<div id="map"></div>
	</div>
</div>
<div data-role="page" id="third" data-add-back-btn="true" data-theme="c">
	<div data-role="header">
		<h1>Routes</h1>
	</div>
	<div data-role="content">       
		<div id="resultPanel">
			<div id="routesHead"><b>Touch-Points</b></div>
			<div id='routesTable'></div><br/>
			<div id="directionsHead"><b>Directions</b></div>
			<div id="directionPanel1"></div>
			<div id="directionPanel2"></div>
			<div>Share Link:<textarea id="linkArea" readonly="readonly" rows="3" cols="10"
			onClick="javascript:this.focus();this.select();"></textarea></div>
			<div id="gplusPanel" class="g-plus" data-action="share" ></div>
			<script type="text/javascript">
				(function() {
				try {
					var po = document.createElement('script'); 
					po.type = 'text/javascript'; 
					po.async = true;
					po.src = 'https://apis.google.com/js/plusone.js';
					var s = document.getElementsByTagName('script')[0]; 
					s.parentNode.insertBefore(po, s);
				} catch(e) {
					console.log('Error in creating GPlus panel. ' + e.message);
				}
				})();
			</script>
		</div>
	</div>
</div>
</body>
</html>